<template>
  <div class="login-container">
    <!-- 中间的盒子   -->
    <div class="container">
      <!--  左侧盒子 -->
      <div
        class="left_box"
        v-motion
        :initial="{ opacity: 0, x: -100 }"
        :enter="{ opacity: 1, x: 0 }"
        :delay="200"
      >
        <el-image
          :src="
            $store.state.layoutStore.loginPic
              ? require('../assets/imgs/login_banner.jpg')
              : require('../assets/imgs/el-login.png')
          "
          style="width: 100%; height: 100%"
          alt=""
        />
      </div>
      <!-- 右侧盒子   -->
      <div class="right_box">
        <h3
          class="title"
          v-motion
          :initial="{ opacity: 0, y: 100 }"
          :enter="{ opacity: 1, y: 0, scale: 1 }"
          :variants="{ custom: { scale: 2 } }"
          :hovered="{ scale: 1.2 }"
          :delay="200"
        >
          后台管理
        </h3>
        <!--   登录表单-->
        <div class="form-container">
          <el-form
            class="input"
            :model="loginForm"
            :rules="loginRules"
            size="large"
            status-icon
          >
            <el-form-item label="账户" prop="phone">
              <!--                vue内部的常量池-->
              <el-input v-model="loginForm.phone">
                <template #prefix>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                show-password
                v-model="loginForm.password"
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <div style="width: 100%">
                <el-input type="code" v-model="loginForm.code" placeholder="">
                  <template #prefix>
                    <el-icon><Coin /></el-icon>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </el-form>
          <!-- 提交表单 -->
          <div
            style="width: 100%"
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
          >
            <el-button
              style="height: 35px"
              type="primary"
              @click="fetchCode"
              :disabled="codeButton.isBtnDisable"
              >{{ codeButton.textMsg }}</el-button
            >
          </div>
          <div
            style="margin-top: 2px; width: 100%"
            v-motion
            :initial="{ opacity: 0, y: 100 }"
            :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
          >
            <el-button
              style="height: 35px; margin-top: 2px"
              type="primary"
              @click="handleLogin"
              :disabled="!loginButton.isPermitted"
            >
              {{ loginButton.textMsg }}
            </el-button>
          </div>
        </div>
        <DarkTheme class="theme" />
      </div>
    </div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
import { reactive, ref, toRaw } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import useMessage from "@/hooks/useMessage";
import { useI18n } from "vue-i18n";
import { Coin } from "@element-plus/icons-vue";
import { code, gpt_login, login, requestVerificationCode } from "@/api/user";
import { Msg } from "@/api/common";
import DarkTheme from "@/layout/components/Header/components/DarkTheme.vue";

// eslint-disable-next-line no-unused-vars
const router = useRouter();
//获取表单元素
const loginFormRef = ref(null);
let codeButton = reactive({
  time: ref(60),
  isBtnDisable: ref(false),
  textMsg: ref("获取验证码"),
});
let loginButton = reactive({
  time: ref(10),
  clickedCnt: ref(0),
  isPermitted: ref(true),
  textMsg: ref("登录"),
});
const loginForm = reactive({
  phone: "18879767723",
  password: "admin",
  code: "355832",
  captchaSuccess: false,
});
const store = useStore();
const { ElMessage } = useMessage();
const { t } = useI18n();

// 登录表单的校验规则
const loginRules = reactive({
  phone: [{ required: true, message: t("userError"), trigger: "blur" }],
  password: [
    { required: true, message: t("PWError"), trigger: "blur" },
    { min: 3, max: 8, message: t("PWSubError"), trigger: "blur" },
  ],
});
async function handleLogin() {
  loginButton.clickedCnt++;
  if (loginButton.clickedCnt >= 5) {
    ElMessage.info(Msg.value.info);
    loginButton.isPermitted = false;
    setInterval(async () => {
      if (!loginButton.isPermitted && loginButton.time > 0) {
        loginButton.textMsg = "请于" + loginButton.time-- + "秒后尝试登录";
      } else {
        loginButton.isPermitted = true;
        loginButton.textMsg = "登录";
        loginButton.clickedCnt = 0;
        clearInterval(loginButton.time);
      }
    }, 1000);
  }
  if (loginButton.isPermitted) {
    try {
      await gpt_login(loginForm);
    } catch (e) {
      ElMessage.error(Msg.value.error);
    }
  }
}
async function fetchCode() {
  codeButton.isBtnDisable = true;
  //60s延时
  setInterval(async () => {
    if (codeButton.time > 0) {
      codeButton.isBtnDisable = true;
      codeButton.textMsg = "请于" + codeButton.time-- + "秒后获取";
    } else {
      codeButton.isBtnDisable = false;
      codeButton.textMsg = Msg.value.verifyCode;
    }
  }, 1000);
  await requestVerificationCode(loginForm.phone);
}
</script>

<style lang="scss">
@import "@/style/slide.scss";
@import "@/style/mixin.scss";

.login-container {
  height: 100vh;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .container {
    /* @include bg_color(); */
    background-color: var(--el-bg-color);
    width: 670px;
    height: 400px;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 20px 2px rgba(255, 255, 255, 0.1);

    .left_box {
      width: 286px;

      img {
        height: 100%;
      }
    }

    .right_box {
      width: 344px;
      padding: 20px;
      position: relative;

      .title {
        text-align: center;
        font-size: 24px;
        margin: 20px auto 40px auto;
        font-weight: 700;
      }

      .form-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .input {
          margin-top: 10px;
        }
        .el-form {
          margin-top: 0;
          margin-left: 2px;
          margin-right: 20px;
          width: 100%;
          /* vue3中的样式穿透 */
          ::v-deep(.el-form-item__content) {
            margin-left: 0px !important;
          }
        }

        .el-button {
          width: 100%;
        }
      }

      .language {
        width: 38px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }

      .theme {
        width: 38px;
        height: 40px;
        position: absolute;
        right: 38px;
        top: 0px;
      }
    }
  }
}
</style>
